<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>华为云开发者空间—车路云控制中心</title>
        <!-- 引入mqtt.js库（通过CDN） --> 
        <script src="https://unpkg.com/mqtt@4.3.7/dist/mqtt.min.js"></script>
        <link rel="stylesheet" href="./index.css" />
  
    </head>
    <body>
    <!-- 这里可以添加您的内容 -->  
      <!-- 标题栏目 -->
      <div style="width: 100%;height: 9%; display: flex; justify-content: center; align-items: center;" class="beijinxiaocheng">
            <!-- 华为图片 -->
            <div style="width: 20%;height: 100%;display: flex; align-items: center; ">              
                     <img src="img/华为抠图.png" style="height: 140px; margin-left: 140px;" alt="">              
            </div>
            
             <!-- 标题 -->
            <div style="width: 60%;height: 100%;display: flex; justify-content: center; font-size: 45px;font-weight: bold;font-weight: 700; padding-top: 5px;" class="beijinshangmian">
                  华为开发者空间—车路云控制中心
            </div>
             <!-- 乐知行log -->
            <div style="width: 20%;height: 100%;display: flex;  align-items: center;">
                <img src="img/地图/乐知行log.png" style="height: 55px;margin-left: 50px;" alt="">
            </div>
      </div>
      <!-- 定位和实时画面 -->
      <div style="width: 100%;height: 62%;display: flex;">
        <!-- 定位 -->
         <div style="width: 50%;height: 95%;display: flex; justify-content: center; align-items: center;">
            <div style="width: 79%;height: 95%;background: #ffffff; border-radius:90px;display: flex; justify-content: center; align-items: center;" >
               <div style="width: 98.5%;height: 97%;border-radius:90px;display: flex; justify-content: center; align-items: center; position: relative; " >
                   <img src="img/地图/地图3.png" alt="" style="width:  742px; height: 530px;position: absolute; z-index: 4;  border-radius:90px;">
                    <img id="4hxiaocheweizi1" src="./img/红绿灯/4H.png" style="width: 40px;height:40px; position: absolute; z-index: 7;">
                   <img id="4hxiaocheweizi2" src="./img/红绿灯/4H.png" style="width: 40px;height:40px; position: absolute; z-index: 7;">
                  <img id="4hxiaocheweizi3" src="./img/红绿灯/4H.png" style="width: 40px;height:40px; position: absolute; z-index: 7;">

               </div>
            </div>
         </div>
        <!-- 摄像头 -->
        <div  style="width: 50%;height: 100%;display: flex; justify-content: center; align-items: center;">
              <div style="width: 85%;height: 90%;background: #ffffff; border-radius:40px;  border-radius: 20px;" >
                <!-- 标题 -->
               <div style="width: 100%;height: 10%;  border-radius: 20px 20px 0px 0px;display: flex;">
                  <div style="width: 15%;height: 100%;background: #ffffff;display: flex; justify-content: center; align-items: center; border-radius: 20px 20px 0px 0px;">
                     <img onclick="xiaochezuojiantou" src="img/箭头/左箭头.png" alt="" style="width: 35px;height: 35px;">
                  </div>
                  <div style="width: 70%;height: 100%;display: flex; justify-content: center; align-items: center;font-size: 30px; font-weight: bold;color: #2a2a2a;">
                     RTRC 4H&nbsp;<div id="xiaocheshebeihao">00</div>
                  </div>
                  <div style="width: 15%;height: 100%;background: #ffffff;display: flex; justify-content: center; align-items: center;border-radius: 20px 20px 0px 0px;">
                      <img onclick="xiaocheyouzhuan" src="img/箭头/右箭头.png" alt=""  style="width: 35px;height: 35px;">
                  </div>
               </div>
               <!-- 视频 --------- -------- -->
               <div style="width: 100%;height: 50%;display: flex; justify-content: center; align-items: center;">
                     <div style="width: 90%; height: 95%; border-radius: 20px;">
                                    <!-- 核心播放窗口 -->
                                                                      <div class="max-w-6xl mx-auto" style="width: 100%;height: 100%; border-radius: 20px;display: flex; justify-content: center; align-items: center;">
                                                                          <div class="relative bg-black rounded-lg overflow-hidden shadow-md webrtc-player-container">
                                                                              <!-- 视频播放元素 -->
                                                                              <video  style="width: 500px; height:220px;border-radius: 20px;"
                                                                                  id="whep-player"  
                                                                                  class="w-full h-full object-contain" 
                                                                                  autoplay 
                                                                                  controls 
                                                                                  playsinline
                                                                                  
                                                                              ></video>

                                                                              <!-- 加载状态提示 -->
                                                                              <div id="loading" class="absolute inset-0 flex flex-col items-center justify-center text-white">
                                                                                  <div class="w-12 h-12 border-4 border-blue-400 border-t-transparent rounded-full animate-spin mb-3"></div>
                                                                                  <p class="text-lg">正在连接 WHEP 流...</p>
                                                                              </div>

                                                                              <!-- 错误提示 -->
                                                                              <div id="error" class="absolute inset-0 hidden flex-col items-center justify-center bg-black/80 text-white p-4">
                                                                                  <i class="fa fa-exclamation-triangle text-4xl text-yellow-400 mb-3"></i>
                                                                                  <p id="error-text" class="text-lg mb-4 text-center">连接失败，请检查网络或地址</p>
                                                                                  <button id="retry-btn" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded transition-colors">
                                                                                      重试连接
                                                                                  </button>
                                                                              </div>
                                                                          </div>
                                                                      </div>


                     </div>
               </div>
               <!-- 数据 -->
               <div style="width: 100%;height: 40%; border-radius: 0px 0px 20px 20px;display: flex; justify-content: center; align-items: center;font-size: 20px;color: #484848;">
                  <div  style="width: 40%; height: 90%;">
                     <div style="display: flex;">前舵机电压：<div id="qianduojidianya" style="color: rgb(0, 0, 0);">0</div><div >V</div></div> 
                     <div  style="display: flex;">前舵机电流：<div  id="qianduojidianliou" style="color: rgb(0, 0, 0);">0</div>  <div>mA</div></div>
                     <div  style="display: flex;">前舵机温度：<div  id="qianduojiwendu" style="color: rgb(255, 0, 0);">0</div>  <div>℃</div> </div>
                     <div  style="display: flex;">前舵机位置：<div  id="qianduojiweizhi"  style="color: rgb(0, 0, 0);">0</div> <div>°</div></div> 
                     <div  style="display: flex;">前舵机微调值：<div  id="qianduojiweitiaozhi"  style="color: rgb(0, 0, 0);">0</div><div>°</div> </div> 
                  </div>
                  <div  style="width: 40%; height: 90%;margin-left: 10px;">
                     <div  style="display: flex;">电机电压：<div  id="dianjidianya"  style="color: rgb(0, 0, 0);display: flex;">0</div><div>V</div> </div> 
                     <div  style="display: flex;">电机电流：<div  id="dianjidianliou"  style="color: rgb(0, 0, 0);">0</div><div>A</div> </div> 
                     <div  style="display: flex;">电机温度：<div  id="dianjiwendu"  style="color: rgb(255, 0, 0);">0</div> <div>℃</div></div> 
                     <div  style="display: flex;">电机转速：<div  id="dianjizhuanshu"  style="color: rgb(0, 0, 0);">0</div>  <div>RPM</div></div>
                     <div  style="display: flex;">电机占空比：<div  id="dianjizhankongbi"  style="color: rgb(0, 0, 0);">0</div> <div>%</div></div>
                     <div  style="display: flex;">电机输出电流：<div  id="shuchudianliou"  style="color: rgb(0, 0, 0);">0</div> <div>A</div></div>
                  </div>
               </div>
              </div>
        </div>
      </div>
      <!-- 路端设备 -->
      <div style="width: 100%;height: 29%; display: flex;">
          <!-- 红绿灯 -->
          <div style="width: 25%;height: 100%;display: flex; justify-content: center; align-items: center;">
               <div style="width: 90%;height: 82%;background: #ffffff; border-radius:20px;margin-bottom: 20px;" >
                  <!-- 信息 -->
                     <!-- 顶层 图片 文字 在线设备 -->
                   <div style="width:100%;height: 25%;display: flex;">
                        <div style="width: 50%;height: 100%;display: flex;">
                               <!-- 图片 -->
                                 <div style="width: 20%;height: 100%;display: flex; justify-content: center; align-items: center;">
                                    <img src="./img/红绿灯/红绿灯.png" alt="" style="height: 50%;">
                                 </div>
                              <!-- 红绿灯文字 -->
                              <div style="width: 40%;height: 100%;display: flex; align-items: center; font-weight: bold; font-size: 25px;"> 红绿灯</div>
                        </div>
                        <div style="width: 50%;height: 100%;display: flex;align-items: center;">                          
                             <!-- 在线设备 -->
                              <div style="display: flex; margin-left: auto; margin-right: 20px;font-size: 15px;font-weight: bold;color: #5f5f5f;  align-items: center;">
                                 在线设备：<div id="honglunshebeuigeshu" style="font-size: 25px;font-weight: bold; color: #000;">0</div>
                              </div>                           
                        </div>
                   </div>
                   <div style="width:100%;height: 58%;display: flex; justify-content: center; align-items: center;">
                        <div style="width: 70px; height: 70px;border-radius: 50%;" class="juzhong">
                           <img id="xiangzuo" src="./img/红绿灯/向左箭头_红色.png" alt="" style="width: 70px;height: 70px;">
                        </div>
                        <div style="width: 70px; height: 70px;border-radius: 50%;margin-left: 10px;"  class="juzhong">
                               <img id="xiangqian" src="./img/红绿灯/向上箭头_红色.png" alt="" style="width: 80px;height: 80px;">
                        </div>
                        <div style="width: 70px; height: 70px;border-radius: 50%;margin-left: 10px;"  class="juzhong">
                            <img id="xiangyou" src="./img/红绿灯/向右箭头_红色.png" alt="" style="width: 90px;height: 90px;">
                        </div>
                        <div id="honglundengshuzi" style="width: 70px; height: 70px;margin-left: 10px;font-weight: bold;font-size: 50px; " class="juzhong">00</div>

                   </div>
                   <div onclick="honglundengzuodianji()"  style="width:100%;height: 17%;display: flex;"class="juzhong">
                         <img src="./img/箭头/左箭头.png" style="width: 20px;height: 20px;" alt="">
                        <div id="honglunzuozuobian" style="color: #d6d6d6; margin-left: 15px">0</div>
                        <div id="honglundangqianshebei" style="margin-left: 40px;">0</div>
                        <div id="honglunzuoyoubian" style="color: #d6d6d6;margin-left: 40px;">0</div>
                        <img onclick="honglunzuoyoubian()"  src="./img/箭头/右箭头.png"  style="width: 20px;height: 20px;margin-left: 15px;"  alt="">
                   </div>
               </div>
          </div>
           <!-- 交通标志 -->
           <div style="width: 25%;height: 100%;display: flex; justify-content: center; align-items: center;">
               <div style="width: 90%;height: 82%;background: #ffffff; border-radius:20px;margin-bottom: 20px;" >
                          <!-- 信息 -->
                     <!-- 顶层 图片 文字 在线设备 -->
                   <div style="width:100%;height: 25%;display: flex;">
                        <div style="width: 50%;height: 100%;display: flex;">
                               <!-- 图片 -->
                                 <div style="width: 20%;height: 100%;display: flex; justify-content: center; align-items: center;">
                                    <img src="./img/栏车杆.png" alt="" style="height: 50%;">
                                 </div>
                              <!-- 红绿灯文字 -->
                              <div style="width: 50%;height: 100%;display: flex; align-items: center; font-weight: bold; font-size: 25px;"> 交通标志</div>
                        </div>
                        <div style="width: 50%;height: 100%;display: flex;align-items: center;">                          
                             <!-- 在线设备 -->
                              <div style="display: flex; margin-left: auto; margin-right: 20px;font-size: 15px;font-weight: bold;color: #5f5f5f;  align-items: center;">
                                 在线设备：<div id="jiaotongquanbushebei" style="font-size: 25px;font-weight: bold; color: #000;">0</div>
                              </div>                           
                        </div>
                   </div>
                   <div style="width:100%;height: 58%;display: flex; justify-content: center; align-items: center;">
                        <div style="width: 70px; height: 70px;border-radius: 50%;" class="juzhong">
                           <img id="jiaotongtupian" src="./img/5人行道01.jpg" alt="" style="width: 100px;height: 100px;">
                        </div>
                     

                   </div>
                   <div style="width:100%;height: 17%;display: flex;"class="juzhong">
                         <img onclick="jiaotongzuodianji()"  src="./img/箭头/左箭头.png" style="width: 20px;height: 20px;" alt="">
                        <div style="color: #d6d6d6; margin-left: 15px" id="jiaotongbiaoziqianmian">0</div>
                        <div style="margin-left: 40px;" id="jiaotongdangqianhao">0</div>
                        <div style="color: #d6d6d6;margin-left: 40px;" id="jiaotongbiaozihoumian">0</div>
                        <img onclick="jiaotongyoudianji()"  src="./img/箭头/右箭头.png"  style="width: 20px;height: 20px;margin-left: 15px;"  alt="">
                   </div>

               </div>
          </div>
           <!-- etc -->
            <div style="width: 25%;height: 100%;display: flex; justify-content: center; align-items: center;">
               <div style="width: 90%;height: 82%;background: #ffffff; border-radius:20px;margin-bottom: 20px;" >
                       <!-- 信息 -->
                     <!-- 顶层 图片 文字 在线设备 -->
                   <div style="width:100%;height: 25%;display: flex;">
                        <div style="width: 50%;height: 100%;display: flex;">
                               <!-- 图片 -->
                                 <div style="width: 20%;height: 100%;display: flex; justify-content: center; align-items: center;">
                                    <img src="./img/etc/ETC.png" alt="" style="height: 50%;">
                                 </div>
                              <!-- 红绿灯文字 -->
                              <div style="width: 50%;height: 100%;display: flex; align-items: center; font-weight: bold; font-size: 25px;"> 电动闸机</div>
                        </div>
                        <div style="width: 50%;height: 100%;display: flex;align-items: center;">                          
                             <!-- 在线设备 -->
                              <div style="display: flex; margin-left: auto; margin-right: 20px;font-size: 15px;font-weight: bold;color: #5f5f5f;  align-items: center;">
                                 在线设备：<div id="etcquanbushuju" style="font-size: 25px;font-weight: bold; color: #000;">0</div>
                              </div>                           
                        </div>
                   </div>
                   <div style="width:100%;height: 58%;display: flex; justify-content: center; align-items: center;">
                        <div style="width: 70px; height: 70px;border-radius: 50%;" class="juzhong">
                           <img id="etczhuangtai" src="./img/背景加栏车杆/拦车关闭.png" alt="" style="width: 100px;height: 100px;">
                        </div>
                       
                    
                   </div>
                   <div style="width:100%;height: 17%;display: flex;"class="juzhong">
                         <img  onclick="etczuodianji()"  src="./img/箭头/左箭头.png" style="width: 20px;height: 20px;" alt="">
                        <div id="etcdangqianshebeiqianmian" style="color: #d6d6d6; margin-left: 15px">0</div>
                        <div id="etcdangqianshebei" style="margin-left: 40px;">0</div>
                        <div id="etcdangqianshebeihoumian" style="color: #d6d6d6;margin-left: 40px;">0</div>
                        <img  onclick="etcyoudianji()"  src="./img/箭头/右箭头.png"  style="width: 20px;height: 20px;margin-left: 15px;"  alt="">
                   </div>
               </div>
          </div>
           <!-- 建筑灯光 -->
            <div style="width: 25%;height: 100%;display: flex; justify-content: center; align-items: center;">
               <div style="width: 90%;height: 82%;background: #ffffff; border-radius:20px;margin-bottom: 20px;" >
                       <!-- 信息 -->
                     <!-- 顶层 图片 文字 在线设备 -->
                   <div style="width:100%;height: 25%;display: flex;">
                        <div style="width: 50%;height: 100%;display: flex;">
                               <!-- 图片 -->
                                 <div style="width: 20%;height: 100%;display: flex; justify-content: center; align-items: center;">
                                    <img src="./img/建筑灯光/路灯.png" alt="" style="height: 50%;">
                                 </div>
                              <!-- 红绿灯文字 -->
                              <div style="width: 50%;height: 100%;display: flex; align-items: center; font-weight: bold; font-size: 25px;">建筑灯光</div>
                        </div>
                        <div style="width: 50%;height: 100%;display: flex;align-items: center;">                          
                             <!-- 在线设备 -->
                              <div style="display: flex; margin-left: auto; margin-right: 20px;font-size: 15px;font-weight: bold;color: #5f5f5f;  align-items: center;">
                                 在线设备：<div id="jiaotongzxian" style="font-size: 30px;font-weight: bold; color: #000;">0</div>
                              </div>                           
                        </div>
                   </div>
                   <div style="width:100%;height: 58%;display: flex; justify-content: center; align-items: center;">
                        <div style="width: 70px; height: 70px;border-radius: 50%;" class="juzhong">
                           <img id="jiaotongmoshi" src="./img/建筑灯光/关灯.png" alt="" style="width: 100px;height: 100px;">
                          
                        </div>
                         <div style="width: 90px;height: 40px;margin-left: 30px;font-weight: bold;font-size: 20px;" class="juzhong" id="jiaotongwenzhi">关闭</div>
                   </div>
                   <div style="width:100%;height: 17%;display: flex;"class="juzhong">
                         <img  onclick="juanzhuzuodianji()"  src="./img/箭头/左箭头.png" style="width: 20px;height: 20px;" alt="">
                        <div style="color: #d6d6d6; margin-left: 15px" id="jiaotongqianmianshebei">0</div>
                        <div style="margin-left: 40px;" id="jiaotongdangqian">0</div>
                        <div style="color: #d6d6d6;margin-left: 40px;" id="jiaotonghoumianshebei">0</div>
                        <img  onclick="jianzhuzuodianji()"  src="./img/箭头/右箭头.png"  style="width: 20px;height: 20px;margin-left: 15px;"  alt="">
                   </div>
               </div>
          </div>
      </div>
        
        <!-- 状态显示区域 ----------------------------------------------------------------------------------------------------------------------------------------------------->
    <script src="./index.js"></script>
</body>
</html>

